<template>
  <a-row :gutter="8">
    <!--舰队1-->
    <a-col :span="12">
      <div class="fleet-root">
        <a-row :gutter="8">
          <!--后排-->
          <a-col :span="8">
            <div class="fleet-row">后排</div>
            <div class="fleet-row" v-for="item in ourBackShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--中排-->
          <a-col :span="8">
            <div class="fleet-row">中排</div>
            <div class="fleet-row" v-for="item in ourMiddleShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--前排-->
          <a-col :span="8">
            <div class="fleet-row">前排</div>
            <div class="fleet-row" v-for="item in ourFrontShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
        </a-row>
      </div>
    </a-col>
    <!--舰队2-->
    <a-col :span="12">
      <div class="fleet-root">
        <a-row :gutter="8">
          <!--后排-->
          <a-col :span="8">
            <div class="fleet-row">前排</div>
            <div class="fleet-row" v-for="item in enemyFrontShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--中排-->
          <a-col :span="8">
            <div class="fleet-row">中排</div>
            <div class="fleet-row" v-for="item in enemyMiddleShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--前排-->
          <a-col :span="8">
            <div class="fleet-row">后排</div>
            <div class="fleet-row" v-for="item in enemyBackShip" :key="item.ship.name">
              {{ item.ship.name }} * {{ item.count }}
            </div>
          </a-col>
        </a-row>
      </div>
    </a-col>
  </a-row>
  <br />
  <a-row :gutter="8">
    <a-col :span="6">
      <div class="fleet-root">
        <div class="fleet-row">舰队武器分摊池</div>
        <div class="fleet-row" v-for="sharePool in fleetStore.ourFleetSharePoolList" :key="sharePool.weaponName">
          <div>
            武器名称： {{ sharePool.weaponName }}
            <br />
            分摊数： {{ sharePool.shareNumber }}
          </div>
          <div class="be-attacked-ship">可以攻击的敌方舰船：</div>
          <div class="be-attacked-ship" v-for="ship in sharePool.shipList" :key="ship.name">{{ ship.name }}</div>
        </div>
      </div>
    </a-col>
    <a-col :span="6"></a-col>
    <a-col :span="6"></a-col>
    <a-col :span="6"></a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { CarilionRecon, Cas066Integrated, Eris1HeavyCannon, TaurusPulseCannon, WingedHussarAntiShip, genShipList } from '@/coreModel/shipConfig';
import { Row, type Fleet, type WarshipGroup } from '@/coreModel/types';
import { useFleetStore } from '@/stores/fleet';
import { computed } from 'vue'

const aFleat: Fleet = {
  shipList: [
    ...genShipList(CarilionRecon, 5),
    ...genShipList(TaurusPulseCannon, 3),
    ...genShipList(Eris1HeavyCannon, 3),
    ...genShipList(WingedHussarAntiShip, 5),
    ...genShipList(Cas066Integrated, 2)
  ]
}
const fleetStore = useFleetStore()
fleetStore.ourFleet = aFleat
fleetStore.enemyFleet = aFleat

const ourFrontShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedOurFleet.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Front
  })
})
const ourMiddleShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedOurFleet.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Middle
  })
})
const ourBackShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedOurFleet.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Back
  })
})

const enemyFrontShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedEnemyFleat.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Front
  })
})
const enemyMiddleShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedEnemyFleat.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Middle
  })
})
const enemyBackShip = computed<WarshipGroup[]>(() => {
  return fleetStore.groupedEnemyFleat.shipGroup.filter((shipGroup) => {
    return shipGroup.ship.shipTemplate.standRow == Row.Back
  })
})
</script>
<style scoped lang="scss">
.fleet-root {
  background: #0092ff;
  padding: 8px 8px;

  .fleet-row {
    background: #c0e3ff;
    padding: 8px 8px;
    margin-bottom: 8px;
  }
}

.be-attacked-ship {
  background: #ffeaab;
  padding: 4px 4px;
  margin-bottom: 4px;
}
</style>
